<template>
  <div class="app-container">
    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
      <el-tab-pane name="dbx">
        <span slot="label"> <i class="el-icon-s-order"></i>&nbsp;待办箱 </span>
        <div v-if="tabActiveName == 'dbx'">
          <div class="filter-container">
            <el-form :inline="true" label-position="right" label-width="90px">
              <el-form-item label="项目名称">
                <el-input
                  v-model="listQuery.projectName"
                  placeholder="项目名称"
                />
              </el-form-item>
              <el-form-item label="业务编号">
                <el-input v-model="listQuery.number" placeholder="业务编号" />
              </el-form-item>
              <el-form-item label="流程环节">
                <el-select
                  @change="changePage(1)"
                  placeholder="流程环节"
                  v-model="listQuery.implementProcess"
                >
                  <el-option
                    v-for="(item, index) in processData"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="changePage(1)" type="primary"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="biaojiLine">
            <div class>时限图例：</div>
            <div class="daibanBox-tag-right">
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox1"></div>
                <div class="biaoshiBoxText">正常</div>
              </div>
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox2"></div>
                <div class="biaoshiBoxText">预警</div>
              </div>
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox3"></div>
                <div class="biaoshiBoxText">警告</div>
              </div>
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox4"></div>
                <div class="biaoshiBoxText">超期</div>
              </div>
            </div>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            highlight-current-row
          >
            <el-table-column width="90" label="时限">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.postponeType == 'NORMAL'"
                  type="info"
                  effect="dark"
                  size="mini"
                  >{{ scope.row.postponeDay }}天</el-tag
                >
                <el-tag
                  style="border: 1px solid #FFD242;"
                  v-else-if="scope.row.postponeType == 'EARLY_WARNING'"
                  color="#FFD242"
                  effect="dark"
                  size="mini"
                  >{{ scope.row.postponeDay }}天</el-tag
                >
                <el-tag
                  v-else-if="scope.row.postponeType == 'WARNING'"
                  type="warning"
                  effect="dark"
                  size="mini"
                  >{{ scope.row.postponeDay }}天</el-tag
                >
                <el-tag
                  v-else-if="scope.row.postponeType == 'ULTRA_TIME'"
                  type="danger"
                  effect="dark"
                  size="mini"
                  >{{ scope.row.postponeDay }}天</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="projectNum"
              label="业务编号"
            ></el-table-column>
            <el-table-column
              prop="projectType"
              label="项目类型"
            ></el-table-column>
            <el-table-column
              prop="projectLevelName"
              label="项目级别"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
            ></el-table-column>
            <el-table-column
              prop="processName"
              label="流程环节"
            ></el-table-column>
            <el-table-column
              prop="lastSubmitTime"
              label="上一流程提交时间"
            ></el-table-column>
            <el-table-column prop="submitter" label="提交人"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <router-link
                  v-if="scope.row.processValue == 'PROJECT_DISTRIBUTE'"
                  :to="{ name: '项目铺排' }"
                >
                  <el-button size="mini" type="primary">办理</el-button>
                </router-link>
                <a v-else @click="handleSaveData(scope.row, 1)">
                  <el-button size="mini" type="primary">办理</el-button>
                </a>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              @current-change="changePage"
              :page-size="listQuery.size"
              layout="prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="ybx">
        <span slot="label"> <i class="el-icon-s-claim"></i>&nbsp;已办箱 </span>
        <div v-if="tabActiveName == 'ybx'">
          <div class="filter-container">
            <el-form :inline="true" label-position="right" label-width="90px">
              <el-form-item label="项目名称">
                <el-input
                  v-model="listQuery.projectName"
                  placeholder="项目名称"
                />
              </el-form-item>
              <el-form-item label="业务编号">
                <el-input v-model="listQuery.number" placeholder="业务编号" />
              </el-form-item>
              <el-form-item label="流程环节">
                <el-select
                  @change="changePage(1)"
                  placeholder="流程环节"
                  v-model="listQuery.implementProcess"
                >
                  <el-option
                    v-for="(item, index) in processData"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="changePage(1)" type="primary"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            highlight-current-row
          >
            <el-table-column
              prop="projectNum"
              label="业务编号"
            ></el-table-column>
            <el-table-column
              prop="projectType"
              label="项目类型"
            ></el-table-column>
            <el-table-column
              prop="projectLevelName"
              label="项目级别"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
            ></el-table-column>
            <el-table-column
              prop="processName"
              label="流程环节"
            ></el-table-column>
            <el-table-column label="已办流程">
              <template slot-scope="scope">
                <el-button
                  style="margin-right: 10px;"
                  size="mini"
                  type="primary"
                  @click="
                    handleShowProcess(
                      scope.row.finishedProcess,
                      scope.row.projectId
                    )
                  "
                  >查看流程</el-button
                >
                <router-link
                  v-if="scope.row.processValue == 'PROJECT_DISTRIBUTE'"
                  :to="{ name: '项目铺排' }"
                >
                  <el-button size="mini" type="primary">查看</el-button>
                </router-link>
                <a v-else @click="handleSaveData(scope.row, 2)">
                  <el-button size="mini" type="primary">查看</el-button>
                </a>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              @current-change="changePage"
              :page-size="listQuery.size"
              layout="prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :close-on-click-modal="false" width="50%" title="已办流程" :visible.sync="dialog">
      <optionList :optionList="optionListData" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getWaitList,
  getAlreadyList,
  getProcessData,
  getProjectDealBusiness
} from "@/api/project/xmkgh/ywdeal";
import { getToken } from "@/utils/auth";
import config, { handleTwoPhaseJumpRoute } from "@/config";
import optionList from "@/components/optionList";

export default {
  components: {
    optionList
  },
  data() {
    return {
      list: [],
      optionListData: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectName: null,
        number: null,
        // feasiblePlanProcess: null, // 可研规划阶段流程
        dealType: null, // 项目办理环节
        implementProcess: "ALL_PROCESS" // 实施阶段流程
      },
      tabActiveName: "dbx",
      processData: [],
      processData1: [],
      processData2: [],
      baseUrl: config.baseUrl,
      userId: "",
      userInfo: "",
      finishedProcess: [],
      dialog: false
    };
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      let fun = null;
      if (this.tabActiveName == "dbx") {
        this.listQuery.dealType = "WAIT_DEAL";
      } else if (this.tabActiveName == "ybx") {
        this.listQuery.dealType = "ALREADY_DEAL";
      }
      getProjectDealBusiness(this.listQuery)
        .then(res => {
          this.listLoading = false;
          this.list = res.data.rows;
          this.total = res.data.total;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    },
    getProcessData(callback) {
      getProcessData({
        processType: "IMPLEMENT"
      }).then(res => {
        this.processData = res.data;
        this.processData1 = res.data;
        let arr = JSON.parse(JSON.stringify(res.data));
        arr.forEach((item, index) => {
          if (item.code == "PROJECT_WHETHER_UPDATE") {
            arr.splice(index, 1);
          }
        });
        this.processData2 = arr;
        // this.listQuery["implementProcess"] = this.processData[0].code;
        // callback();
      });
    },
    handleTabClick(tab, event) {
      if (this.tabActiveName == "dbx") {
        this.processData = this.processData1;
      } else {
        this.processData = this.processData2;
      }

      if (this.tabActiveName != "tzx") {
        this.clearListQuery();
        this.changePage(1);
      }
    },
    clearListQuery() {
      this.listQuery["projectName"] = null;
      this.listQuery["number"] = null;
      this.listQuery["implementProcess"] = this.processData[0].code;
    },
    handleShowProcess(arr, id) {
      this.finishedProcess = arr;
      this.dialog = true;
      localStorage.setItem("projectId", id);
    },
    handleSaveData(row, num) {
      localStorage.setItem("lookStatus", num);
      localStorage.setItem("router", row.processValue);
      if (this.userInfo.roleList.length > 0) {
        localStorage.setItem("menusName", this.userInfo.roleList[0].code);
      } else {
        this.$alert("暂无权限", "提示", {
          confirmButtonText: "确定",
          callback: action => {
            this.$router.push("/login");
          }
        });
      }
      localStorage.setItem("userId", this.userInfo.userId);
      localStorage.setItem("projectId", row.projectId);
      localStorage.setItem("projectName", row.name);
      handleTwoPhaseJumpRoute();
    }
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo;
    this.getProcessData();
    this.fetchData();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
}
.biaojiLine {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  color: #333;
  background-color: rgb(241, 243, 247);
  margin-bottom: 12px;
  padding-left: 22px;
  font-size: 14px;
}
.daibanBox-tag-right {
  display: flex;
  align-items: center;
}
.biaoshiItem {
  display: flex;
  align-items: center;
  margin-right: 10px;
  .biaoshiBox {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
  }
  .biaoshiBox.biaoshiBox1 {
    background-color: #909399;
  }
  .biaoshiBox.biaoshiBox2 {
    background-color: rgb(255, 210, 66);
  }
  .biaoshiBox.biaoshiBox3 {
    background-color: #e6a23c;
  }
  .biaoshiBox.biaoshiBox4 {
    background-color: #f56c6c;
  }
  .biaoshiBoxText {
    font-size: 12px;
    margin-left: 5px;
    line-height: 15px;
  }
}
</style>
